Design Challenge

Our persona (a student in a second language) needs an easy way to structure her learning vocabulary, because she has a fast-paced life and struggles to stay on track.

Methods

☞ Competitive analysis

☞ User interviews

☞ User personas

☞ Task analysis & user flows

☞ Wireframes (low-fidelity & mid-fidelity)

☞ Usability testing

Duration

2-week design sprint

My Process

Competitive Analysis

One of the first steps in the user-centered design process is research. So conducting a competitive analysis helps me to understand the problem space I’m operating in. I started looking at 3 competitors in the field of flashcard learning apps. The conducted analysis focused on the assessment of strengths and weaknesses with a special UX view. It’s the chance to discover positive features to use as well and potential areas where you can do better or tackle an existing gap. To conduct this analysis I selected 3 of the most prominent search results for ‘flashcard learning’ in the Google Playstore and decided to involve only apps that are built for vocabulary learning to have a common basis.

User Interviews

As a further element of my research phase, I conducted user interviews to gather qualitative information directly from potential users, who would interact with my product. The emphasis was on learning about our users and gathering insights about flashcard learning experiences, attitudes towards this learning method in general, and discovering problem spaces. I prepared an interview script that allowed me to follow a plan and cover certain fields of interest but left room for upcoming topics.

☞ 3 user interviews á 15 min.

☞ in-person and remote via video-call

☞ 7 open-ended questions as an interview guide to cover most relevant fields of interest

Interview questions

1. Are you a student, professional, or both? Please tell me a little bit about your responsibilities and daily routines.

2. When was the last time you had to learn some new vocabulary or new technical terms? Did you succeed? Why or why not?

3. When you last tried to learn new words, what did you use to do so? Please describe your process.

→ used analogue methods

3.a Imagine you would use an app now. Is there anything you would miss (for example, writing flashcards by hand)?

3.b What added value could an app offer you instead?

→ already used learning apps

3.a What features do you think would be most useful to you in a flashcard program?

3.b Did you miss something that is typical for old learning methods?

4. What do you feel in general when you think about learning new vocabulary / technical terms?

5. Tell me about a time you’ve been frustrated with jargon and new vocabulary. Why was it frustrating? Is there something that could have made it easier for you?

After conducting the interviews I summarized all participants’ statements that were relevant to understanding potential flashcard learning app users by clustering in attitudinal and behavioral categories (doing, thinking, feeling). This was the first step towards a deeper analysis of the paramount insights I gained during speaking with people about the relevant subject.

To further process the gained information, I decided to continue with building user personas based on the conducted research.

User Persona

This method followed my information gathering stage. Summing up, bundling, compromising all interview insights and feedback leads me to the construction of a proto-persona. User personas are an extremely handy, compromised UX deliverable that should be used as a guide during many following development stages as they allow me to keep the user and the challenges I want to tackle always at first priority.

In order to build this proto-persona, I discovered the main focus areas that came up in conducted research and build a most realistic but fictive persona based on what I learned. The ultimate goal for personas would be the continuous development based on all gained findings but even proto-personas that are built on few insights are of value in the user-centered design process.

Have a look at the proto-persona Anni representing our mobile flashcard app user group:

To sum up all research findings to this point, I aggregated the core information in a problem statement and a hypothesis statement. These common methods are helpful to visualize the central problem, I want to tackle with creating this mobile app. 

Task Analysis & User Flow

After understanding what users try to accomplish with our app, it’s helpful to map the user flows as well. I prioritized different tasks users would accomplish in a flashcard learning app and build simple task analyses for two main tasks:

☞ Creating a new language flashcard

Entry point: open app
Success Criteria: successfully created a language flashcard

☞ Learning flashcards

Entry point: open app
Success Criteria: finished one learning session

I moved through the different needed steps to accomplish these tasks in the simplest way and identified points of decision-making and points that vary depending on individual circumstances. With these developed task analyses, I could build user flows for the two main tasks. To visualize these flows I choose the software FlowMapp as it allows me to build the flows easily, fast, and flexible to rearrange the flows while building them and discovering further loops and relevant points. These are the flows for our app:

Low-Fidelity Wireframes & Prototyping

With these user flow maps I had the fundament to start sketching out the first wireframes. I knew which steps users need to take when accomplishing the tasks. This flow builds my reference point for needed screens as well. 

I decided to start with pen and paper and tried out different approaches. I decided on the most promising versions that could help users to accomplish their goals with the flashcard learning app. Here’s a glimpse into the created wireframes following a super simple approach. In my opinion, it’s paramount to keep the wireframes of low fidelity in the early stages to avoid getting too involved and having a hard time letting created wireframes go again which will eventually happen when showing them to real users and observing the interactions.

Usability Test

I converted these sketches to build the first clickable prototype which was tested by 3 users in total. I used the software Marvel Prototyping to upload images of paper sketches and link them to a clickable prototype.

As a next step, I showed it to recruited potential users and observed the first interactions with the built product. Testing was focused on primary tasks identified in the user persona stage and it let me understand if users were able to accomplish these tasks. I conducted 3 test sessions à 15 minutes via video conferencing tool and asked participants to share their screens. As a single test moderator, I took notes of all observations about how people interacted with the prototype.

I clustered the observations and rated them by Jakob Nielsen's error severity rating:

0 = I don't agree that this is a usability problem at all

1 = Cosmetic problem only: no need to be fixed unless extra time is available on the project

2 = Minor usability problem: fixing this should be given low priority

3 = Major usability problem: important to fix, so should be given high priority

4 = Usability catastrophe: imperative to fix this before the product can be released

The usability test leads to improvements on key features and to a revised prototype. Conducting a small usability test at this early stage with simple paper sketches linked to a prototype already helped to build something that is really designed for user needs. I decided to work out potential solutions for the observed usability errors or problems and iterated the whole prototype.

Design Iteration: Mid-Fidelity Wireframes

Fast user testing helped me to gather interesting feedback at an early stage and I could use it for creating a mid-fidelity prototype next. I decided to create the next wireframe iteration digitally using Marvell Prototyping which helped me to create a consistent look and feel while using elements of a design library to keep up the speed and more important the focus on the potential user solutions. Below you can see a selection of created wireframes and can explore the full interactive prototype as well:

Interactive Prototype

Conclusion

Considering the time frame, project’s objective, and the fact that I build this case study right after deciding to evolve my career more specialized towards UX design, I’m pretty happy with the results and confirmed in my journey to build experiences with involving the people and exploring their challenges systematically in order to build meaningful experiences.

At the moment I'm not working on this UX project as this was all about learning the added value of fast user testing, conducting research, and creating deliverables in a 2-week design sprint as part of my UX specialisation course. Probably I will pick up on the development stage of this again, conducting a second usability test, designing high fidelity wireframes, and start building the UI design for this project as well.